import React, { Component } from 'react';
import Logo from '../../component/logo/logo.js'
import { List,InputItem,WingBlank,Button,WhiteSpace,Radio } from 'antd-mobile';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { regiest } from '../../redux/user.redux'

class Regiest extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
        user:'',
        pwd:'',
        repwd:'',
        type:'genius'
    }
    this.handleRegiest = this.handleRegiest.bind(this)
  }

  handleChange(type,value){
    this.setState({
      [type]:value
    })
  }
  handleRegiest(){
    this.props.regiest(this.state)
  }

  render() {
    const RadioItem = Radio.RadioItem
    return (
      <div className="regiest">
        {this.props.redirectTo?<Redirect to={this.props.redirectTo}></Redirect>:null}
        <Logo></Logo>
        <WingBlank>
          {this.props.msg? <p className="err">{this.props.msg}</p>:null}
            <List>
               <InputItem
                   onChange={v=>this.handleChange('user',v)}>账号</InputItem>
               <WhiteSpace/>
               <InputItem
                   type="password"
                   onChange={v=>this.handleChange('pwd',v)}>密码</InputItem>
               <WhiteSpace/>
               <InputItem
                   type="password"
                   onChange={v=>this.handleChange('repwd',v)}>确认密码</InputItem>
               <WhiteSpace/>
               <RadioItem
                   checked={this.state.type==='genius'}
                   onChange={()=>this.handleChange('type','genius')}>牛人</RadioItem>
               <WhiteSpace/> 
               <RadioItem
                   checked={this.state.type==='boss'}
                   onChange={()=>this.handleChange('type','boss')}>BOSS</RadioItem>
               <WhiteSpace />
               <Button type="primary" onClick={this.handleRegiest}>注册</Button>
            </List>           
        </WingBlank>
      </div>
    );
  }
}

const mapStatetoProps =(state)=>{
  return state.user
}

const actionCreators = {regiest}
Regiest = connect(mapStatetoProps,actionCreators)(Regiest)
export default Regiest;